<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>页面截图工具</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
  <style>
    button {
      padding: 12px 24px;
      background: #1890ff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      margin: 20px;
    }
    
    #preview-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }
    
    .preview-content {
      background: white;
      padding: 20px;
      border-radius: 8px;
      width: 60vw;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
    }
    
    .preview-image-container {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: auto;
    }
    
    .preview-image {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
    
    .preview-footer {
      display: flex;
      justify-content: center;
      gap: 10px;
      padding-top: 15px;
    }
  </style>
</head>
<body>
  <button id="captureBtn">生成截图</button>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const captureBtn = document.getElementById('captureBtn');
      
      // 创建临时装饰容器
      const decorContainer = document.createElement('div');
      decorContainer.id = 'decor-container';
      decorContainer.style.position = 'fixed';
      decorContainer.style.top = '20px';
      decorContainer.style.left = '20px';
      decorContainer.style.width = '500px';
      decorContainer.style.height = '200px';
      decorContainer.style.pointerEvents = 'none';
      decorContainer.style.display = 'none';
      document.body.appendChild(decorContainer);
      
      // 创建弹窗
      const modal = document.createElement('div');
      modal.id = 'preview-modal';
      document.body.appendChild(modal);
      
      modal.addEventListener('click', function(e) {
        if(e.target === modal) modal.style.display = 'none';
      });
      
      captureBtn.addEventListener('click', function() {
        // 添加装饰元素 (相当于原来的卡片内容)
        decorContainer.innerHTML = `
          <div style="
            width: 500px;
            padding: 20px;
            border: 1px solid #ddd;
            background: #fff;
          ">
            <div id="customText" style="position:absolute;left:20px;bottom:20px;font-size:14px;color:#666;">
              扫描二维码访问原文
            </div>
            <div id="qrcode" style="position:absolute;right:20px;bottom:20px;"></div>
          </div>
        `;
        
        // 生成二维码
        new QRCode(document.getElementById('qrcode'), {
          text: window.location.href,
          width: 100,
          height: 100
        });
        
        decorContainer.style.display = 'block';
        
        // 截图
        html2canvas(document.body, {
          ignoreElements: (element) => element === modal
        }).then(canvas => {
          decorContainer.style.display = 'none';
          
          modal.innerHTML = `
            <div class="preview-content">
              <div style="text-align:right;">
                <button id="modal-close" style="background:none;border:none;font-size:20px;cursor:pointer;">×</button>
              </div>
              <div class="preview-image-container">
                <img class="preview-image" src="${canvas.toDataURL('image/png')}">
              </div>
              <div class="preview-footer">
                <a href="${canvas.toDataURL('image/png')}" 
                   download="page-screenshot.png" 
                   style="display:inline-block;padding:8px 15px;background:#1890ff;color:white;text-decoration:none;border-radius:4px;">
                   下载图片
                </a>
                <a href="https://weibo.com/share?url=${encodeURIComponent(window.location.href)}" 
                   target="_blank"
                   style="display:inline-block;padding:8px 15px;background:#ff8200;color:white;text-decoration:none;border-radius:4px;">
                   微博分享
                </a>
              </div>
            </div>
          `;
          
          modal.style.display = 'flex';
          document.getElementById('modal-close').onclick = () => modal.style.display = 'none';
        });
      });
    });
  </script>
</body>
</html>